<template>
  <div class="asides">
    <el-aside width="260px">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        active-text-color="yellow"
        background-color="#977C00"
        router
      >
        <div class="title">
          <span class="el-icon-s-order">考勤管理</span>
          <span class=""></span>
          <span class="el-icon-more"></span>
          <span class="el-icon-circle-plus-outline"></span>
        </div>
        <el-menu-item index="/index/business">
          <i class="el-icon-menu"></i>
          <span slot="title">出差申请</span>
        </el-menu-item>

        <el-menu-item index="/index/outside">
          <i class="el-icon-document"></i>
          <span slot="title">外勤打卡</span>
        </el-menu-item>

        <el-menu-item index="/index/leave">
          <i class="el-icon-setting"></i>
          <span slot="title">请假申请</span>
        </el-menu-item>

        <el-menu-item index="/index/work">
          <i class="el-icon-setting"></i>
          <span slot="title">加班申请</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.asides {
  .el-aside {
    height: 100%;
    .el-menu-vertical-demo {
      height: 100%;
    }
    .title {
      height: 60px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
    }
  }
}
</style>